<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文件列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/min_page.css" />
		<link rel="stylesheet" type="text/css" href="css/sameInfo.css" />
		<link rel="stylesheet" type="text/css" href="css/personal_files.css" />
		<script src="js/config.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="application/javascript " src="js/jquery-1.7.2.min.js "></script>
		<script src="layer/layer.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
	</head>
	<style>

	</style>

	<body>
		<div class="all_files_title">
			<img src="img_page/right.png" onclick="javascript :history.back(-1);" />
			<div class="title_center">我的文件夹(10)</div>
			<span class="files_admin">管理</span>
		</div>
		<!--所有文件夹-->
		<div class="all_files_con">
			<div class="files_info_first" onclick="showInfoBox()">
				<img src="img_page/person_list_add.png" />
				<span>新建文件夹</span>
			</div>
			<div class="files_info" v-for='(v,index) in files'>

				<img class="files_img" src="img_page/all_files.png" @click="filesDetails(v.type_id)" />
				<img class="del" id="files_del" src="img_page/del.png" @click="filesDel(v.type_id,index)" />
				<span>{{v.type_name}}</span>
			</div>

		</div>
		<!--遮罩层-->
		<div id="bgMask" class="bg"></div>
		<!--灰度背景-->
		<!--弹出层内容-->
		<div id="infoBox" style="" class="infobox_bg">
			<div class="infobox_title">新建文件夹</div>
			<input class="infobox_input" placeholder="1-16个字符" name="type_name" id="files_name" /><br />

			<div class="infobox_bottom">
				<button onclick="hideInfoBox();">取消</button>
				<button onclick="sureInfoBox();">确定</button>
			</div>
		</div>
	</body>
	<script>
		/**遮罩层弹出与隐藏*/
		//记录是否阻止滚动
		var disableScroll = false;

		//如果弹出对话框时，底层的视图就不让滚动了
		document.addEventListener('touchmove', function(e) {
			if(disableScroll) {
				e.preventDefault();
			}
		}, false); //显示弹出框
		function showInfoBox() {
			//禁止滚动
			disableScroll = true;

			//显示背景遮罩
			document.getElementById("bgMask").style.display = "block";
			//显示消息弹出框
			document.getElementById("infoBox").style.display = "block";
		}

		//隐藏弹出框
		function hideInfoBox() {
			//允许滚动
			disableScroll = false;
			//隐藏背景遮罩
			document.getElementById("bgMask").style.display = "none";
			//隐藏消息弹出框
			document.getElementById("infoBox").style.display = "none";
		}
		//删除文件夹显示与隐藏
		$('.files_admin').toggle(function() {
			console.log(555)
					$('.files_admin').html('完成')
					$('.del').css({
						"display": "block"
					})
				},
				function() {
					$('.files_admin').html('管理')
					$('.del').css({
						"display": "none"
					})
				})
		
		
		//点击确定
		function sureInfoBox() {
			console.log(all_files.files);
			$(".infobox_input")[0].focus();
			var type_name = document.getElementById("files_name").value;
			var infobox_input = $(".infobox_input").val().replace(/(^\s*)|(\s*$)/g, "");
			if(infobox_input == null || infobox_input == "") {
				layer.msg('输入框不能为空', {
					time: 1500
				});
				return false;
			} else if(infobox_input.length > 16) {
				layer.msg('文件名不能超过16位', {
					time: 1500
				});
			} else {
				$.ajax({
					type: "get",
					url: v_url + "/wechat/singlepage/addMyFile",
					data: {
						type_name: type_name,
						c_user_id:c_user_id
					},
					async: false,
					success: function(res) {
						if(res.code = 200) {
							//隐藏背景遮罩
							document.getElementById("bgMask").style.display = "none";
							//隐藏消息弹出框
							document.getElementById("infoBox").style.display = "none";
							console.log("成功");
							var files = all_files.files;
							var obj = res.data;
							files.push(obj);
							all_files.files = files
							$("#files_name").val('');
							//window.location.reload();
						}

					},
					error: function(request) {
						console.log("链接失败")
					}

				});
			}
			//允许滚动
			disableScroll = false;
		}
		/**----------------*/
		/**列表循环*/
		var all_files = new Vue({
			el: ".all_files_con",
			data: {
				files: [],
				list_num: '0'
			},
			created: function() {
				this.getList();
			},
			methods: {
				getList: function() {
					console.log("11111");
					var that = this;
					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/getMyFileList",
						data: {
							source: '1',
							c_user_id:c_user_id
						},
						async: true,
						success: function(res) {
							var list = res.data;
							that.files = list
							console.log(that.files);
						}
					});

				},
				//文件夹跳转详情
		filesDetails:function(type_id) {
			window.location.href = 'personal_file_list.html?url=' + type_id + '&c_user_id=' + c_user_id
		},
			//删除文件夹接口
		filesDel:function(type_id, v_index) {
			//	console.log(v_index)
			layer.confirm('删除文件夹将会删除里面的所有单页，确定要删除吗？', {
				btn: ['确定', '取消'],
				area: ['85%', 'auto'],
				yes: function(index, layero) {

					$.ajax({
						type: "get",
						url: v_url + "/wechat/singlepage/deleteMyFile",
						data: {
							type_id: type_id,
							c_user_id:c_user_id
						},
						success: function(res) {
							console.log(res)
							if(res.code == 200) {
								$(".files_info").each(function(i) {
									console.log(i)
									if(i == v_index) {
										$(this).remove();
									}
								});
								layer.close(index);
							}
						}
					})
				}
			});

		}

			}
		})
	</script>

</html>